// 1 导入react
import React from 'react'
import ReactDOM from 'react-dom'

import PropTypes from 'prop-types'
// 引入css文件
import "./index.css"





/**
 * props校验
 */

//props 校验:允许在创建组件的时候 就制定props的类型 格式等
//作用 捕获是在组件时因为props导致的错误 给出明确的错误提示函 增加组件的健壮性

// 使用步骤

// 安装prop-types (yran add prop-types/npm i props-types)
// 导入prop-types 包
// 使用组件名.props={} 来给组件的props添加校验规则
// 校验规则通过 PropTypes对象来指定



//TypeError: arr.map is not a function




const App = props => {
    const arr = props.colors
    const list = arr.map((item, index) =>
        <li key={index}>
            {item}
        </li>
    )
    return (
        <div>
            <ul>
                {list}
            </ul>
            <p>
                默认值 {props.pageSize}
            </p>
        </div>
    )
}

//添加props校验

// 约束规则 
// 类型 array bool func number object String
// React元素类型 element
// 必填项: isRequire
// 特定结构的对象: shaoe({})

App.propTypes = {
    //约定colors 属性的array类型
    //如果类型不对 则报出明确错误 便于分析错误原因
    colors: PropTypes.array
}


// props 默认值
App.defaultProps={
    pageSize:10
}

//3 渲染react元素
ReactDOM.render(
    <App
        // pageSize={11}
        colors={['red', "blue", "grent"]} />,
    document.getElementById('root'))
